<script lang="ts">
export default {
  name: "createDialog",
};
</script>
<script lang="ts" setup>
import { ref, computed } from "vue";
import Header from "@/views/Demo/Demo1/header.vue";
const props = defineProps({
  title: {
    required: true,
    type: String,
    default: "",
  },
  hide: {
    required: true,
    type: Function,
  },
  component: {
    required: true,
  },
  showFooter: {
    default: false,
  },
  data: {
    default: {},
  },
  handleClose: {
    default: () => {},
  },
  width: {
    default: "900px",
  },
  height: {
    default: "auto",
  },
  footer: {
    default: {
      show: true,
      confirm: "确定",
      cancle: "取消",
      position: "center",
    },
  },
  showClose: {
    default: true,
  },
  header: {},
});
console.log(props.header, typeof props.header);
console.log("Header", Header);

const show = ref(true);
const componentRef = ref({ handleConfirm: () => {} });
const isString = computed(() => {
  const type = typeof props.component;
  return type == "string" ? true : false;
});
const headerIsString = computed(() => {
  const type = typeof props.header;
  return type == "string" ? true : false;
});
const closed = () => {
  props.hide();
  (props as any)?.handleClose();
};
const handleClose1 = () => {
  show.value = false;
};
const confirm = () => {
  componentRef.value.handleConfirm();
};
</script>

<template>
  <div>
    <el-dialog
      v-model="show"
      :title="title"
      :style="{ width, height }"
      @closed="closed"
      :show-close="showClose"
    >
      <template #header="{ close }">
        <div v-if="headerIsString" v-html="props.header"></div>
        <component v-else :is="header" :close="close" />
      </template>
      <component
        v-if="component && !isString"
        :is="component"
        :hide="handleClose1"
        :data="data"
        ref="componentRef"
      />
      <div v-if="isString" v-html="component"></div>
      <template #footer v-if="footer.show">
        <div
          :style="{
            display: 'flex',
            justifyContent: footer.position ? footer.position : 'right',
          }"
        >
          <div class="width:fit-content">
            <el-button @click="show = false">{{
              footer.cancle ? footer.cancle : "取消"
            }}</el-button>
            <el-button type="primary" @click="confirm">
              {{ footer.confirm ? footer.confirm : "确定" }}
            </el-button>
          </div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<style>
.my-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>
